<!--菜单栏-->
<template>
  <t-menu
    :value="activeMenu"
    :collapsed="collapsed"
    :theme="menuTheme"
    @change="handleMenuClick"
  >
    <template #logo>
      <img :width="collapsed ? 35 : 136" :src="iconUrl" alt="logo" />
    </template>
    <template v-for="group in menuConfig" :key="group.group">
      <t-menu-group :title="group.group">
        <template v-for="item in group.children" :key="item.value">
          <t-submenu
            v-if="item.type === 'submenu'"
            :title="item.title"
            :value="item.value"
          >
            <template #icon>
              <t-icon :name="item.icon" />
            </template>
            <t-menu-item
              v-for="sub in item.children"
              :key="sub.value"
              :value="sub.value"
              :title="sub.label"
              @click="handleMenuClick(sub.value)"
            >
              {{ sub.label }}
            </t-menu-item>
          </t-submenu>
          <t-menu-item
            v-else
            :value="item.value"
            :title="item.label"
            @click="handleMenuClick(item.value)"
          >
            <template #icon v-if="item.icon">
              <t-icon :name="item.icon" />
            </template>
            {{ item.label }}
          </t-menu-item>
        </template>
      </t-menu-group>
    </template>
    <template #operations>
      <t-tooltip content="收缩/展开菜单" placement="right">
        <t-button class="t-demo-collapse-btn" variant="text" shape="square" @click="changeCollapsed">
          <template #icon><t-icon name="view-list" /></template>
        </t-button>
      </t-tooltip>
    </template>
  </t-menu>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
const collapsed = ref(false);
const iconUrl = ref('https://tdesign.gtimg.com/site/baseLogo-light.png');
const emit = defineEmits(['toggle-collapse','collapse'])

const menuTheme = ref('light'); // 可根据全局主题切换

const activeMenu = ref(route.path);
watch(() => route.path, (val) => {
  activeMenu.value = val;
});

const changeCollapsed = () => {
  collapsed.value = !collapsed.value;
  iconUrl.value = collapsed.value
      ? 'https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/logo%402x.png'
      : 'https://tdesign.gtimg.com/site/baseLogo-light.png';
  emit('toggle-collapse', collapsed.value);
  emit('collapse', collapsed.value);
};

const handleMenuClick = (path) => {
  activeMenu.value = path;
  router.push(path);
};

const menuConfig = [
  {
    group: '数据概览',
    children: [
      {
        type: 'submenu',
        title: '仪表盘',
        value: '1-1',
        icon: 'app',
        children: [
          { type: 'item', value: '/dashboard/workbench', label: '工作台' },
          { type: 'item', value: '/dashboard/analysis', label: '分析页' },
        ]
      }
    ]
  },
  {
    group: '常用功能',
    children: [
      {
        type: 'submenu',
        title: '功能中心',
        value: '2-1',
        icon: 'server',
        children: [
          { type: 'item', value: '/featureCenter/imageCrop', label: '图像裁剪' },
          { type: 'item', value: '/featureCenter/excelFile', label: 'excel导入导出' },
          { type: 'item', value: '/featureCenter/qrCode', label: '二维码' },
          { type: 'item', value: '/featureCenter/richTextCompiler', label: '富文本编译器' },
          { type: 'item', value: '/featureCenter/statsCard', label: '统计卡片' },
          { type: 'item', value: '/featureCenter/puzzle', label: '在线拼图' }, // 新增在线拼图菜单项
        ]
      },
      {
        type: 'submenu',
        title: '搜罗来的奇妙样式',
        value: '2-2',
        icon: 'star',
        children: [
          { type: 'item', value: '/featureCenter/prettyInput', label: '好看的Tooltips' },
          { type: 'item', value: '/featureCenter/loadingDemo', label: '加载动画' },
          { type: 'item', value: '/featureCenter/switchDemo', label: '开关菜单' },
        ]
      }
    ]
  },
  {
    group: '系统管理',
    children: [
      {
        type: 'submenu',
        title: '用户管理',
        value: '3-2',
        icon: 'user-setting',
        children: [
          { type: 'item', value: '/userCenter/userList', label: '用户列表' },
          { type: 'item', value: '/userCenter/userRole', label: '用户角色' },
          { type: 'item', value: '/userCenter/userPermission', label: '用户权限' },
        ]
      },
      {
        type: 'submenu',
        title: '结果页',
        value: '3-1',
        icon: 'bug',
        children: [
          { type: 'item', value: '/result/403', label: '403' },
          { type: 'item', value: '/result/404', label: '404' },
          { type: 'item', value: '/result/500', label: '500' },
          { type: 'item', value: '/result/browser-incompatible', label: '浏览器不兼容' },
          { type: 'item', value: '/result/fail', label: '项目创建失败' },
          { type: 'item', value: '/result/maintenance', label: '系统维护中' },
          { type: 'item', value: '/result/network-error', label: '网络异常' },
          { type: 'item', value: '/result/success', label: '项目已创建成功' },
        ]
      }
    ]
  },
  {
    group: '更多',
    children: [
      { type: 'item', value: '/personalCenter/devLogs', label: '开发日志', icon: 'system-log' },
      { type: 'item', value: '/personalCenter/personalCenter', label: '个人中心', icon: 'user' },
      { type: 'item', value: '/login', label: '登录页面', icon: 'login' },
    ]
  }
];
</script>

<style scoped lang="less">
</style>